<template>
    <view class="bg-content">
        <view class="comment" v-if="tbGoodsComment">
            <view class="top">
                <view class="left" @click="replyComment(tbGoodsComment)">
                    <view class="heart-photo">
                        <myImg :obj="tbGoodsComment" :sysFile="{fkId: tbGoodsComment.userId}" class="picture"
                               :customStyle="'pointer-events: none; height: 50px;  width:50px; border-radius: 50%; background-size: cover; background-repeat: no-repeat; background-position: center;'"
                               :defaultUrl="'/static/default-image/user-avatar.png'" :imageView="'imageView2/1/w/50/h/50'"></myImg>
                    </view>
                    <view class="user-info">
                        <div style="font-size: 12px; color: #777;" v-if="tbGoodsComment.tbOrderGoods">
                            规格：{{tbGoodsComment.tbOrderGoods.specName}} &nbsp;
                            <label v-if="tbGoodsComment.tbOrderGoods.colorId">颜色：{{tbGoodsComment.tbOrderGoods.colorName}}</label>
                        </div>
                        <view class="name">
                            {{ tbGoodsComment.name }}&nbsp;&nbsp;
                            <u-tag plain type="error" size="mini" style="margin-left: 5px;"
                                   v-if="tbGoodsComment.userId === urlParams.sellerId">店主
                            </u-tag>
                        </view>
                        <view class="date">{{tbGoodsComment.showTime}}</view>
                    </view>
                </view>
                <view class="right" :class="{ highlight: tbGoodsComment.isLike }">
                    {{ tbGoodsComment.likeNum }}
                    <u-icon v-if="!tbGoodsComment.isLike" name="thumb-up" class="like" color="#9a9a9a" :size="30" @click="getLike(tbGoodsComment)"></u-icon>
                    <u-icon v-if="tbGoodsComment.isLike" name="thumb-up-fill" class="like" :size="30" @click="getLike(tbGoodsComment)"></u-icon>
                </view>
            </view>
            <view class="content" style="padding-left: 55px;">{{ tbGoodsComment.content }}</view>
        </view>
        <view class="all-reply" v-if="tbGoodsComment">
            <view class="all-reply-top">全部回复（{{ pagination.total }}）</view>
            <view class="item" v-for="(item, index) in tbGoodsCommentList" :key="index">
                <view class="comment">
                    <view class="top">
                        <view class="left" @click="replyComment(item)">
                            <view class="heart-photo">
                                <myImg :obj="item" :sysFile="{fkId: item.userId}" class="picture"
                                       :customStyle="'pointer-events: none; height: 50px;  width:50px; border-radius: 50%; background-size: cover; background-repeat: no-repeat; background-position: center;'"
                                       :defaultUrl="'/static/default-image/user-avatar.png'" :imageView="'imageView2/1/w/50/h/50'"></myImg>
                            </view>
                            <view class="user-info">
                                <div style="font-size: 12px; color: #777;" v-if="item.tbOrderGoods">
                                    规格：{{item.tbOrderGoods.specName}} &nbsp;
                                    <label v-if="item.tbOrderGoods.colorId">颜色：{{item.tbOrderGoods.colorName}}</label>
                                </div>
                                <view class="name">{{ item.name }}</view>
                                <view class="date">{{ item.showTime }}</view>
                            </view>
                        </view>
                        <view class="right" :class="{ highlight: item.isLike }">
                            <view class="num">{{ item.likeNum }}</view>
                            <u-icon v-if="!item.isLike" name="thumb-up" class="like" :size="30" color="#9a9a9a" @click="getLike(item)"></u-icon>
                            <u-icon v-if="item.isLike" name="thumb-up-fill" class="like" :size="30" @click="getLike(item)"></u-icon>
                        </view>
                    </view>
                    <view class="reply" v-if="item.parent && item.parent.id !== tbGoodsComment.id">
                        <view class="username">{{ item.parent.name }}</view>
                        <view class="text">{{ item.parent.content }}</view>
                    </view>
                    <view class="content" style="padding-left: 55px;">{{ item.content }}</view>
                </view>
            </view>
        </view>

        <div style="padding-top: 10px;" :style="{'padding-bottom': !!selectedComment ? '100px' : '90px'}" v-if="tbGoodsCommentList.length">
            <u-loadmore :status="pagination.status" bg-color="#eeeeee"/>
        </div>

        <div class="custom-bottom-bar">
            <div style="width: 100%; padding: 10px;">
                <div style="padding-bottom: 8px;" v-if="!!selectedComment">
                    <span style="color: #666;">
                        回复 @{{selectedComment.name}}
                        <u-icon name="close" style="padding-left: 5px;" size="26" :color="$u.color['error']" @click="delReplyComment()"></u-icon>
                    </span>
                </div>
                <u-input type="textarea" height="40" :clearable="false" :focus="autoFocus" placeholder="说点什么吧" v-model="comment"/>
            </div>
            <div style="width: 100px; padding: 10px;">
                <u-button height="70" @click="sendComment()">发送</u-button>
            </div>
        </div>
    </view>
</template>

<script>
    import {TbGoodsCommentService} from "../../../../../dev/services/tb-goods-comment.service";
    import {CommonUtil} from "../../../../../dev/core/utils/common.util";
    import {toValue} from "../../../../../dev/core/utils/filters.util";
    import myImg from '@/components/my-img'

    export default {
        data() {
            return {
                tbGoodsComment: null,
                tbGoodsCommentList: [],
                comment: '',
                selectedComment: null,
                autoFocus: false
            };
        },
        components: {
            myImg
        },
        onLoad() {
            const _self = this;
            new TbGoodsCommentService().findTbGoodsComment({
                id: _self.urlParams.id,
                isLike: true,
                userId: _self.globalVariable.userInfo.id
            }).then(result => {
                _self.tbGoodsComment = result;
                _self.addName(result, 0);
                _self.doRefresh(_self.tbGoodsCommentList);
            });
        },
        methods: {
            // 点赞
            getLike(item) {
                const _self = this;
                new TbGoodsCommentService().addOrDelTbGoodsCommentLike({
                    goodsCommentId: item.id,
                    userId: _self.globalVariable.userInfo.id,
                    isLike: !item.isLike
                }).then(result => {

                    item.isLike = !item.isLike;
                    if (item.isLike === true) {
                        item.likeNum += 1;
                    } else {
                        item.likeNum -= 1;
                    }

                    if (this.globalVariable.tempData.tbGoodsCommentList) {
                        this.globalVariable.tempData.tbGoodsCommentList.forEach((tbGoodsComment, index) => {
                            if (tbGoodsComment.id === item.id) {
                                tbGoodsComment.isLike = !tbGoodsComment.isLike;
                                if (tbGoodsComment.isLike === true) {
                                    tbGoodsComment.likeNum += 1;
                                } else {
                                    tbGoodsComment.likeNum -= 1;
                                }
                            }
                        });
                    }

                    _self.$forceUpdate();
                });
            },
            /**
             * 加载更多数据中
             * @param infiniteScroll
             */
            doInfinite(infiniteScroll) {
                const _self = this;
                new TbGoodsCommentService().findReplyTableListCascade({
                    pagination: _self.pagination,
                    data: {
                        parentId: _self.urlParams.id,
                        userId: _self.globalVariable.userInfo.id,
                    },
                }).then(result => {
                    _self.pagination.refreshPage(result);

                    // 随机生成匿名名称
                    result.list.forEach((item, index) => {
                        _self.addName(item, index);
                    });

                    _self.tbGoodsCommentList = [..._self.tbGoodsCommentList, ...result.list];
                    // 更新showTime
                    _self.tbGoodsCommentList.forEach((item, index) => {
                        item.showTime = CommonUtil.showTime(item.createTime);
                    });
                });
            },

            addName(item, index) {
                const _self = this;
                if (!item.isAnonymous) {
                    item.name = toValue('item.sysUser.name', item, '昵称未设置');
                } else {
                    item.name = '匿名用户' + CommonUtil.randomStr(3) + (_self.tbGoodsCommentList.length + index);
                }
                if (item.parent) {
                    if (!item.parent.isAnonymous) {
                        item.parent.name = toValue('item.parent.sysUser.name', item, '昵称未设置');
                    } else {
                        item.parent.name = '匿名用户' + CommonUtil.randomStr(3);
                    }
                }
            },

            /**
             * 回复点击的评论
             * @param item
             */
            replyComment(item) {
                const _self = this;
                _self.selectedComment = item;
                _self.autoFocus = true;
                _self.$forceUpdate();
            },

            /**
             * 删除选中的评论
             * @param focus
             */
            delReplyComment(focus = true) {
                const _self = this;
                _self.selectedComment = null;
                _self.autoFocus = focus;
                _self.$forceUpdate();
            },

            /**
             * 发送评论
             */
            sendComment() {
                const _self = this;
                if (_self.comment.trim() === '') {
                    _self.comment = '';
                    CommonUtil.toast('说点什么吧');
                    return;
                }

                // 遇到双空格时换行内容
                let content = _self.comment.replace(/  /g, '<br>');
                content = content.replace(/(\<br\>){2,}/g, '<br>');

                let data = {
                    parentId: _self.tbGoodsComment.id,
                    parentIds: _self.tbGoodsComment.id + ',' + _self.tbGoodsComment.parentIds,
                    orderId: _self.tbGoodsComment.orderId,
                    orderGoodsId: _self.tbGoodsComment.orderGoodsId,
                    goodsId: _self.tbGoodsComment.goodsId,
                    userId: _self.globalVariable.userInfo.id,
                    content: content,
                    isAnonymous: false
                };

                // 回复某评论
                if (_self.selectedComment) {
                    data.parentId = _self.selectedComment.id;
                    data.parentIds = _self.selectedComment.id + ',' + _self.selectedComment.parentIds;
                }

                new TbGoodsCommentService().saveTbGoodsComment(data).then(result => {
                    result.sysUser = _self.globalVariable.userInfo;
                    result.parent = _self.tbGoodsComment;
                    _self.addName(result, 0);

                    if (_self.selectedComment) {
                        result.parent = _self.selectedComment;
                    }
                    _self.tbGoodsCommentList.splice(0, 0, result);
                    _self.pagination.total = _self.pagination.total + 1;

                    // 更新showTime
                    _self.tbGoodsCommentList.forEach(item => {
                        item.showTime = CommonUtil.showTime(item.createTime);
                    });

                    _self.selectedComment = null;
                    _self.comment = '';
                    _self.delReplyComment(false);
                    _self.$forceUpdate();
                    CommonUtil.toast('发送成功！');
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
    @import "./index.scss";
</style>
